26.7 KB · ⇊ 17 parts · ⤓ Micron 26.7 KB · ⤓ HTML 47.8 KB

top

WebGL est une spécification d'interface de programmation de 3D dynamique pour les pages et applications HTML5 créée par le Khronos Group. Elle permet d'utiliser le standard OpenGL ES au sein d'une page web, d'un livre numérique au format ePUBcite-ref-2[2], d'un diaporamacite-ref-3[3] ou bien d'une application basée sur le standard HTML5, en s'aidant du langage JavaScript, des données au format JSON et de l'accélération matérielle pour les calculs et le rendu 3D à l'aide des pilotes OpenGL ES du ou des processeurs graphiques du terminal informatique (Ordinateur, smartphone, tablette numérique, etc.). OpenGL ES a été choisi pour son large support au sein des architectures embarquées et mobiles.

• Fonctionnement

• Implémentations

• Limitations

• Problèmes de jeunesse

• Microsoft en retard sur la concurrence

• Projets et réalisations

• Bibliothèques orientées 3D

• Bibliothèques orientées 2D

• Notes et références

• Voir aussi

• Liens externes

WebGL permet d'afficher, de créer et de gérer dynamiquement des éléments graphiques complexes en 3D dans la fenêtre du navigateur web d'un client. Il est actuellement implémenté dans la plupart des grands navigateurs modernes, mais cette implémentation est récente, d'où le fait que cette technologie reste assez méconnue du grand public.

Lorsqu’un élément graphique de type WebGL est inclus dans une page web, le navigateur exécute un programme en JavaScript utilisant l'interface WebGL. La bibliothèque WebGL appelle à son tour le pilote OpenGL ES du système d'exploitation qui se chargera de faire les calculs nécessaires à l'affichage sur l'écran, en exploitant si possible l'accélération matérielle du ou des processeurs graphiques du terminal.

Si, en septembre 2009, aucun navigateur web ne permettait l'affichage 3D directement dans le navigateur sans greffon, ce n'est plus le cas aujourd'huicite-ref-caniuse-4-0[4]:

• Firefox le supporte depuis sa version 4 (6 juillet 2010), il utilise pour cela OpenGL ES dans sa version Android et OpenGL dans sa version Linux, MacOS et Windowscite-ref-5[5] et depuis la version 50 du 15 novembre 2016 WebGL est disponible pour plus de 98 % des utilisateurs sur Windows 7 ou une version ultérieure cite-ref-6[6]

• Google Chrome à partir de la version 9 (3 février 2011)cite-ref-7[7]. La version ChromeOS utilise OpenGL ES, la version Linux utilise OpenGL depuis la version 45 environcite-ref-8[8].

• Safari propose le support de WebGL depuis sa version 5.1 (20 juillet 2011)

• Opera, depuis la version 12 (14 juin 2012)

• Internet Explorer est le dernier des grands navigateurs, avec la version 11 sortie le 17 octobre 2013.

• Les versions mobiles de Firefox, Opera et du navigateur de Blackberry supportent également WebGLcite-ref-caniuse-4-1[4].

WebGL est basé sur OpenGL ES 2.0 (OpenGL for Embedded Systems), une version d'OpenGL destinée aux systèmes embarqués. Elle n'a pas les fonctions d'appel fixe d'OpenGL 1.0 qui sont également obsolètes dans OpenGL 3.0 : par exemple, plutôt que de créer les objets, face par face, avec un appel de fonction à chaque face, une seule fonction soumet une liste de faces au moteur. Il est toujours possible de modifier les paramètres de la liste par la suite. Cela permet d'améliorer les performances en réduisant le flux de données entre processeur principal (CPU) et processeur graphique (GPU), et donc la consommation de bande passante.

WebGL étant fondé sur OpenGL ES, certaines fonctionnalités d'OpenGL y sont absentes, dont :

• Le tampon de sélection (selection buffer, permettant de sélectionner un objet par un simple clic) ; des techniques alternatives, plus gourmandes en calcul, existent cependantcite-ref-9[9].

• Les textures 3D (technique de textures en volume) : bien qu'OpenGL ES 2.0 possède une extension Texture 3Dcite-ref-10[10], celle-ci n'existe pas en WebGLcite-ref-11[11]. La bibliothèque webgl-texture3d tente de remédier à ce problèmecite-ref-12[12].

• Le geometry shader : WebGL dispose du vertex shader et du fragment shader, mais pas du geometry shader.

Khronos Group prépare depuis 2012 le brouillon de la norme WebGL 2.0, basée sur OpenGL ES 3.0cite-ref-13[13]cite-ref-14[14]cite-ref-15[15]. En janvier 2017, un support partiel de WebGL 2.0 est rendu disponible dans Firefox 51 et Chrome 46cite-ref-16[16].

Certains problèmes de compatibilité étant apparus à ses débuts, de nombreuses cartes graphiques avaient été bloquées dans WebGL, les différents constructeurs ont donc fait des efforts sur les pilotes afin de rendre leurs cartes compatiblescite-ref-blocklisting-17-0[17].

En juin 2011, Microsoft a renouvelé sa défiance vis-à-vis de cette technologiecite-ref-ms-webgl-18-0[18], d'après ses dires, principalement pour des raisons de sécurité. WebGL restait alors exclu d'Internet Explorer alors qu'il était supporté par la plupart des navigateurs. Mike Shaver, vice-président de la stratégie technique de la fondation Mozilla répond que les critiques de Microsoft valent pour toutes les technologies 3D web (Silverlight de Microsoft inclus), s'appuyant sur l'accélération 3D matériellecite-ref-reponse-a-ms-19-0[19].

En juin 2013, Microsoft confirme que son prochain navigateur Internet Explorer 11 aura la prise en charge de la technologie WebGLcite-ref-20[20].

Malgré la finalisation récente de WebGL et en raison de son fort potentiel, les projets utilisant cette technologie se multiplient.

Des compilateurs C/C++ vers JavaScript tels qu'Emscripten, Mandreel ou Duetto, permettent de faciliter le portage d'applications préexistantescite-ref-21[21]cite-ref-22[22]cite-ref-23[23].

Parmi les projets et réalisations en WebGL, on notera en particulier la contribution de Google concernant la création de multiples applications en WebGL (Google Map en 3D par exemple), Chrome Experimentscite-ref-24[24], démonstrations régulièrement mises à jour à partir du site The Chromium Projects.

Du côté des jeux vidéo, le portage de Quake 2cite-ref-25[25] est à noter, ainsi que quelques projets de jeux amateurs.

Et enfin les possibilités de la visualisation 3D en ligne pour imagerie médicale ou scientifique, comme la visualisation de l'anatomie humaine ou plus généralement animalecite-ref-26[26], de moléculescite-ref-27[27].

Différents outils de cartographie, comme l'ancienne application de cartographie 3D Nokia Maps 3D WebGL qui représentait des villes entières dont les bâtiments avaient été reconstruits par des procédés automatiques d'imagerie numérique. F4map qui se base sur les données 3D fournies par OpenStreetMap, c'est également le cas plus récemment du moteur WikiMiniAtlascite-ref-28[28] de Wikipedia.

Il existe des sites regroupant des collections d'objets 3D à télécharger et permettant de visualiser les objets disponibles directement dans l'interface web. On peut citer Sketchfabcite-ref-29[29]. C'est le cas aussi du « FlightGear Scenery Model Directory » du simulateur de vol libre FlightGear Flight Simulatorcite-ref-30[30].

Egalement, des plateformes SaaS permettent de téléverser, de visualiser et d'exploiter des objets 3D directement depuis l'interface web.

La NASA a développé une application web interactive appelée "Experience Curiosity" pour célébrer le 3e anniversaire de l'atterrissage du rover Curiosity sur Marscite-ref-nasa-press-release-31-0[31]. This Blend4Web-based appcite-ref-curiosity-app-32-0[32]. L'application permet de contrôler le rover, ses caméras, son bras articulé et de reproduire les événements importants de la mission Mars Science Laboratorycite-ref-blend4web-blog-nasa-33-0[33]cite-ref-technology-org-nasa-webapp-34-0[34]. L'application a été présentée au début de la section WebGL au SIGGRAPH 2015cite-ref-khronos-events-2015-siggraph-35-0[35].

Il existe de plus en plus de bibliothèques pour faciliter le développement en WebGLcite-ref-36[36]. Three.js est l'une des plus répandues.

On peut également citer Babylon.jscite-ref-37[37], Blend4Webcite-ref-blend4web-38-0[38], GLGEcite-ref-glge-39-0[39], CopperLichtcite-ref-copperlicht-40-0[40], C3DLcite-ref-c3dl-41-0[41], SceneJScite-ref-scenejs-42-0[42], SpiderGLcite-ref-spidergl-43-0[43], OSGJScite-ref-44[44] et Verge3D, qui permettent l'implémentation d'objets ou de scènes en trois dimensions dans le navigateur. Certaines sont même dédiées à la visualisation scientifique et médicale, telle que XTK cite-ref-45[45].

Les moteurs de jeu professionnels offrent maintenant la possibilité aux développeurs d'exporter directement dans les navigateurs en WebGL cite-ref-46[46]cite-ref-47[47], ouvrant ainsi la porte au développement de jeux AAA sur WebGL.

Différents frameworks dynamiques 2D utilisent également WebGL, pour tirer parti de son accélération matérielle, c'est le cas par exemple des bibliothèques WebGL-2d, enchant.js ou encore pixi.js, qui permettent également d'ajouter quelques éléments tridimensionnels dans des applications bidimensionnelles. Pixi.js est par exemple utilisée sur les sites promotionnels de la chaîne de restauration rapide américaine McDonald'scite-ref-48[48].

cite-note-11. (en) [1]

cite-note-22. ↑ (en) 3D 4 ebook – FAQ

cite-note-33. ↑ (en) This presentation is an HTML5 website – Canvas 3D (WebGL)

cite-note-caniuse-44. (en) Can I use WebGL?

cite-note-55. ↑ (en) « Platform/GFX/WebGL/Backends », sur mozilla.org

cite-note-66. ↑ [2] sur mozilla.org

cite-note-77. ↑ (en)2011« A dash of speed, 3D and apps », 3 février 2011 (consulté le 10 décembre 2013)

cite-note-88. ↑ il faut le lancer avec les options -ignore-gpu-blacklist -use-egl pour que les versions ≤44 fonctionnent avec OpenGL ES

cite-note-99. ↑ (fr) Le picking en WebGL

cite-note-1010. ↑ (en) OES_texture_3D

cite-note-1111. ↑ (en) 3D textures in WebGL sur le forum d'aide aux développeurs de Khronos

cite-note-1212. ↑ (en) webgl-texture3d

cite-note-1313. ↑ (en) https://wiki.mozilla.org/Platform/GFX/WebGL2

cite-note-1414. ↑ (en) « WebGL 2.0 Specification », sur khronos.org (consulté le 19 mai 2023).

cite-note-1515. ↑ (en) What's coming in WebGL 2.0

cite-note-1616. ↑ Support d'une partie de WebGL 2.0 par Firefox 51 et Chrome 56

cite-note-blocklisting-1717. ↑ Pilotes de cartes graphiques bloqués

cite-note-ms-webgl-1818. ↑ Avis de Microsoft juin 2011

cite-note-reponse-a-ms-1919. ↑ A three-dimensional plateform

cite-note-2020. ↑ WebGL sur Internet Explorer 11

cite-note-2121. ↑ (en) kripken / emscripten – OpenGL support

cite-note-2222. ↑ (en) Duetto (C++ for the Web) 0.9.2 is out — OpenGL ES implementation in WebGL and toolchain improvements

cite-note-2323. ↑ (en) C++ to JavaScript: Emscripten, Mandreel, and now Duetto

cite-note-2424. ↑ Chrome Experiments

cite-note-2525. ↑ Quake 2 WebGL

cite-note-2626. ↑ Zygote Body

cite-note-2727. ↑ GLmol - Molecular Viewer on WebGL/Javascript

cite-note-2828. ↑ WikiMiniAtlas

cite-note-2929. ↑ (en) « Explore 3D Models », sur Sketchfab (consulté le 19 mai 2023).

cite-note-3030. ↑ FlightGear Scenery Model Directory

cite-note-nasa-press-release-3131. ↑ « New Online Exploring Tools Bring NASA's Journey to Mars to New Generation », NASA (consulté le 7 août 2015)

cite-note-curiosity-app-3232. ↑ « Experience Curiosity », NASA's Eyes (consulté le 7 août 2015)

cite-note-blend4web-blog-nasa-3333. ↑ « Prenez le contrôle de Curiosity avec Blend4Web », Greg G.d.Bénicourt Blog (consulté le 16 septembre 2015)

cite-note-technology-org-nasa-webapp-3434. ↑ « Internet 3D: Take the Curiosity Rover for a Spin Right on the NASA Website », Technology.Org (consulté le 12 août 2015)

cite-note-khronos-events-2015-siggraph-3535. ↑ « Khronos Events - 2015 SIGGRAPH », Khronos (consulté le 13 août 2015)

cite-note-3636. ↑ (en) HTML5 game engines - WebGL

cite-note-3737. ↑ http://www.i-programmer.info/news/144-graphics-and-games/6243-babylonjs-a-webgl-game-engine-from-microsoft.html

cite-note-blend4web-3838. ↑ Blend4Web

cite-note-glge-3939. ↑ GLGE

cite-note-copperlicht-4040. ↑ CopperLicht

cite-note-c3dl-4141. ↑ C3DL

cite-note-scenejs-4242. ↑ SceneJS

cite-note-spidergl-4343. ↑ SpiderGL

cite-note-4444. ↑ http://osgjs.org/

cite-note-4545. ↑ « Xtk/X », sur GitHub (consulté le 16 août 2020).

cite-note-4646. ↑ (en) « GDC 14 : Mozilla & Epic Games Run Unreal Engine 4 in Firefox - PC Perspective », sur PC Perspective (consulté le 16 août 2020).

cite-note-4747. ↑ « In-depth on Unity 5's WebGL publishing tech », sur gamasutra.com (consulté le 16 août 2020).

cite-note-4848. ↑ (en) Look Ma! We made the cut… — goodboydigital.com

• Web3D

• WebCL

• O3D

• Liste de bibliothèques 3D

• Liste de frameworks WebGL

• Khronos Group

• Brouillon WebGL 2.0

• Chrome Experiments - WebGL

• developer.Mozilla tech demo - WebGL

• Exemples de développement simples en WebGL utilisant three.js

• learningwebgl, blog donnant régulièrement des liens vers les différentes démos et applications WebGL.

• WebGL Paris, événement gratuit, annuel et francophone autour du WebGL

• understanding of WebGL’s role in 3D graphics and its integration with modern GPUs like the RTX 4090

• Portail de l’imagerie numérique

• Portail d’Internet

• Portail de la programmation informatique